<section>
  <d-splitter orientation="vertical" class="full-height">

    <d-splitter-pane size="10%" [resizable]="false">
      <div class="pane-content">
        <h2>顶部面板</h2>
        <div>高度自适应</div>
      </div>
    </d-splitter-pane>

    <d-splitter-pane size="80%" [resizable]="false">
      <d-splitter class="full-height" orientation="horizontal">

        <d-splitter-pane size="10%" [resizable]="false">
          <div class="pane-content">
            <h2>左侧面板</h2>
            <div>左侧内容区域，宽度10%</div>
          </div>
        </d-splitter-pane>

        <d-splitter-pane [resizable]="false">
          <div class="pane-content">
            <h2>右侧面板</h2>
            <div>

              <div class="row">


                <div class="col-sm-3">
                  <div class="card">
                    <div class="card-header">未分配任务</div>
                    <div class="card-block">
                      <ul class="list-group">
                        <li
                          dDraggable
                          *ngFor="let item of list1"
                          [dragScope]="'default-css'"
                          [dragData]="{ item: item, parent: list1 }"
                          class="list-group-item over-flow-ellipsis"
                        >
                          {{ item.name }}
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>

                <div class="col-sm-3">
                  <div class="card card-outline-primary mb-3" dDroppable [dropScope]="'default-css'"
                       (dropEvent)="onDrop($event, list2)">
                    <div class="card-header">正在进行任务</div>
                    <div class="card-block">
                      <ul class="list-group d-drop-el" dSortable>
                        <li
                          dDraggable
                          *ngFor="let item of list2"
                          [dragScope]="'default-css'"
                          [dragHandleClass]="'drag-handle'"
                          [dragData]="{ item: item, parent: list2 }"
                          class="list-group-item over-flow-ellipsis"
                        >
                          {{ item.name }}
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>

                <div class="col-sm-3">
                  <div class="card card-outline-primary mb-3" dDroppable [dropScope]="'default-css'"
                       (dropEvent)="onDrop($event, list3)">
                    <div class="card-header">已完成任务</div>
                    <div class="card-block">
                      <ul class="list-group drop-el">
                        <li
                          dDraggable
                          *ngFor="let item of list3"
                          [dragScope]="'default-css'"
                          [dragHandleClass]="'drag-handle'"
                          [dragData]="{ item: item, parent: list3 }"
                          class="list-group-item over-flow-ellipsis"
                        >
                          <div>
                            {{ item.name }}
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>


              </div>

              <div>
                <d-button bsStyle="primary" style="margin-right: 5px;" (click)="submit()">提交</d-button>
              </div>

            </div>
          </div>
        </d-splitter-pane>

      </d-splitter>
    </d-splitter-pane>

    <d-splitter-pane size="10%" [resizable]="false">
      <div class="pane-content">
        <h2>底部面板</h2>
        <div>高度自适应</div>
      </div>
    </d-splitter-pane>

  </d-splitter>
</section>
